/**
 * 督导督学管理
 */

<template>
  <div class="contenBox">
    <!-- 左侧导航 -->
    <div class="leftTree">
      <el-tree
        :data="treeData"
        :highlight-current="true"
        :props="defaultProps"
        @node-click="handleNodeClick"
      ></el-tree>
    </div>

    <!-- 右侧内容 -->
    <div class="courseBox">
      <div class="courseBoxTop">
        <div class="courseBoxTopSearch">
          <div class="courseName">
            <span>姓名：</span>
            <el-input
              v-model="searchForm.studentName"
              placeholder="请输入姓名"
            />
          </div>
          <div class="version">
            <span>性别：</span>
            <el-select v-model="searchForm.gender" placeholder="请选择性别">
              <el-option
                :label="item.typeName"
                :value="item.typeId"
                v-for="(item, index) in sexList"
                :key="index"
              >
              </el-option>
            </el-select>
          </div>
          <div class="version">
            <span>年级：</span>
            <el-select
              v-model="searchForm.idgradeType"
              placeholder="请选择年级"
            >
              <el-option
                v-for="item in gradeOptions"
                :key="item.typeId"
                :label="item.typeName"
                :value="item.typeId"
              >
              </el-option>
            </el-select>
          </div>

          <div class="searchAndReset">
            <el-button class="searchBtn" @click="searchData">
              <i class="el-icon-search"></i>
              <span>搜索</span>
            </el-button>
            <el-button class="resetBtn" @click="refreshData">
              <i class="el-icon-refresh"></i>
              <span>重置</span>
            </el-button>
          </div>
        </div>
      </div>

      <!-- 管理列表 -->
      <div class="courseBoxBottom">
        <div class="bottomHeader">
          <span class="title">管理列表</span>
          <div class="bottomHeaderBtn">
            <el-button class="addBtn" @click="batchHandMovementSupervisor">
              <span>批量手动督导</span>
            </el-button>
            <el-button class="addBtn" @click="batchVoluntarilySupervisor">
              <span>批量自动督导</span>
            </el-button>
          </div>
        </div>

        <!-- 表格 -->
        <div class="bottomMian">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column
              type="index"
              label="序号"
              width="50"
            ></el-table-column>
            <el-table-column prop="studentName" label="姓名"></el-table-column>
            <el-table-column prop="gender" label="性别">
              <template slot-scope="scope">
                {{
                  scope.row.gender == "0" || scope.row.gender == "40"
                    ? "男"
                    : "女"
                }}
              </template>
            </el-table-column>
            <el-table-column
              prop="identificationType"
              label="年级"
            ></el-table-column>
            <el-table-column
              prop="studentMotherPhone"
              label="联系方式"
            ></el-table-column>
            <el-table-column
              prop="email"
              label="邮箱"
              min-width="180"
            ></el-table-column>
            <el-table-column prop="action" label="操作" min-width="120">
              <template slot-scope="scope">
                <div class="actionBox">
                  <span
                    class="action"
                    @click="handMovementSupervisor(scope.row.id)"
                    >手动督导</span
                  >
                  <b class="shu">|</b>
                  <span
                    class="action"
                    @click="voluntarilySupervisor(scope.row.id)"
                    >自动督导</span
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div class="pagination">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="10"
              prev-text="上一页"
              next-text="下一页"
              layout=" prev, pager, next"
              :total="total"
            >
            </el-pagination>
            <div class="jumper">
              跳到第
              <input type="text" ref="currentPage" value="1" />
              页
            </div>
            <button class="submit" @click="goPage">确定</button>
          </div>
        </div>
      </div>

      <!-- 手动督导 / 自动督导 弹框 -->
      <div class="dialog">
        <el-dialog
          :title="isVoluntarily ? '自动督导' : '手动督导'"
          :visible.sync="dialogVisible"
        >
          <el-form
            :model="dialogData"
            class="dialogForm"
            ref="dialogForm"
            label-width="120px"
          >
            <el-form-item label="标题" prop="studentName">
              <el-input
                v-model="dialogData.title"
                placeholder="请输入标题"
              ></el-input>
            </el-form-item>
            <el-form-item label="内容" prop="studentContent">
              <el-input
                type="textarea"
                v-model="dialogData.content"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
            <el-form-item label="督导形式" prop="studentStend">
              <el-select
                class="select"
                placeholder="请选择督导形式"
                v-model="dialogData.way"
              >
                <el-option label="邮箱" value="0"></el-option>
                <el-option label="短信" value="1"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item
              label="定时发送"
              prop="studentNumber"
              v-if="isVoluntarily"
            >
              <el-date-picker
                v-model="dialogData.cronTime"
                type="datetime"
                placeholder="选择日期时间"
                @change="setDate"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="handleSubmit">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import "@/styles/picture.scss";

import moment from "moment";
import { _debounce } from "@/utils/debounce";
import { colleageTreeDataApi } from "@/api/basics/college.js";
import { getClassifyListApi } from "@/api/basics/classify";
import {
  manualApi,
  automaticApi,
  getSuperintendentListApi,
} from "@/api/selfStudy/superintendent";
export default {
  name: "superintAdministration",
  data() {
    return {
      // 弹框内容
      dialogData: {
        title: "",
        content: "",
        cronTime: "",
        way: "",
        ids: "",
      },
      dialogVisible: false, // 是否开启弹框
      isVoluntarily: false, // 是否手动
      treeData: [], // 左侧树模拟数据
      // table 数据
      tableData: [],
      multipleSelection: [], // 已选中数据
      currentPage: 1, // 显示当前第几页
      pageSize: 10, // 每页条数
      total: 0, // 添加input
      // 搜索数据
      searchForm: {
        studentName: "",
        idgradeType: "",
        gender: "",
      },
      // 默认tree数据
      defaultProps: {
        children: "children",
        label: "label",
      },
      sexList: [], // 性别列表
      gradeOptions: [], // 年级列表
    };
  },

  created() {
    // 获取左侧树列表
    this.getTree();

    // 获取学生列表
    this.getSuperintendentList({
      pageNum: this.currentPage,
      pageSize: this.pageSize,
    });
  },

  mounted() {
    // 获取性别列表
    this.getSexList({
      parentId: 39,
    });

    // 获取年级列表
    this.getGradeList({
      parentId: 55,
    });
  },

  methods: {
    // 设置时间
    setDate(data) {
      this.dialogData.cronTime = moment(data).format("YYYY-MM-DD HH:mm:ss");
    },

    // 获取左侧树列表
    getTree(data) {
      colleageTreeDataApi(data).then((res) => {
        this.treeData = res.data;
      });
    },

    // 获取性别列表
    async getSexList(data) {
      let res = await getClassifyListApi(data);
      this.sexList = res.rows;
    },

    // 获取年级列表
    async getGradeList(data) {
      const res = await getClassifyListApi(data);
      this.gradeOptions = res.rows;
    },

    // 获取学生列表
    async getSuperintendentList(data) {
      let res = await getSuperintendentListApi(data);
      if (res.code === 200) {
        this.tableData = res.rows;
        this.total = res.total;
      }
    },

    // 搜索
    searchData: _debounce(function () {
      // 获取学生列表
      this.getSuperintendentList({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        ...this.searchForm,
      });
    }),

    // 重置
    refreshData: _debounce(function () {
      this.searchForm = {
        studentName: "",
        idgradeType: "",
        gender: "",
      };
      // 获取学生列表
      this.getSuperintendentList({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      });
    }),

    // 点击左侧树
    handleNodeClick: _debounce(function (data) {
      // 获取学生列表
      this.getSuperintendentList({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        colleageCode: data.title,
      });
    }),

    // 手动
    handMovementSupervisor(ids) {
      this.dialogData.ids = ids;
      this.isVoluntarily = false;
      this.dialogVisible = true;
    },

    // 自动
    voluntarilySupervisor(ids) {
      this.dialogData.ids = ids;
      this.dialogVisible = true;
      this.isVoluntarily = true;
    },

    // 确定
    handleSubmit() {
      if (this.dialogData.cronTime) {
        this.$message("定时发送中~");
        automaticApi(this.dialogData).then((res) => {
          if (res.code === 200) {
            this.dialogVisible = false;
            this.$message.success("定时发送成功！");
            this.multipleSelection = [];
            this.dialogData = {
              title: "",
              content: "",
              cronTime: "",
              ids: "",
            };
          } else {
            this.$message.error("发送失败1");
          }
        });
      } else {
        this.$message("发送中~");
        manualApi(this.dialogData).then((res) => {
          if (res.code === 200) {
            this.dialogVisible = false;
            this.$message.success("发送成功！");
            this.multipleSelection = [];
            this.dialogData = {
              title: "",
              content: "",
              cronTime: "",
              ids: "",
            };
          } else {
            this.$message.error("发送失败!");
          }
        });
      }
    },

    // 取消
    handleClose() {
      this.dialogVisible = false;
      this.dialogData = {
        title: "",
        content: "",
        cronTime: "",
        ids: "",
      };
    },

    // 批量手动
    batchHandMovementSupervisor() {
      if (this.multipleSelection.length > 0) {
        this.isVoluntarily = false;
        this.dialogVisible = true;
        let data = [...this.multipleSelection].map((item) => {
          return "" + item.id;
        });
        this.dialogData.ids = data.join(",");
      } else {
        this.$message.error("请选择学生");
      }
    },

    // 批量自动
    batchVoluntarilySupervisor() {
      if (this.multipleSelection.length > 0) {
        this.isVoluntarily = true;
        this.dialogVisible = true;
        let data = [...this.multipleSelection].map((item) => {
          return "" + item.id;
        });
        this.dialogData.ids = data.join(",");
      } else {
        this.$message.error("请选择学生");
      }
    },

    // 已选中数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 点击数值
    handleCurrentChange(val) {
      this.currentPage = Number(val);
      // 获取学生列表
      this.getSuperintendentList({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        ...this.searchForm,
      });
    },

    // 跳转到当前页
    goPage() {
      let { value } = this.$refs.currentPage;
      this.currentPage = Number(value);
      // 获取学生列表
      this.getSuperintendentList({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        ...this.searchForm,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.contenBox {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #f3f2f7;
  padding: 0 0 0 15px;
  box-sizing: border-box;

  .leftTree {
    width: 250px;
    margin: 0 0 15px 0;
    background-color: #fff;
    border-radius: 5px;
    box-sizing: border-box;

    ::v-deep .el-tree {
      width: 250px;
    }

    ::v-deep .el-tree > .el-tree-node .el-tree-node__content {
      height: 56px;
      position: relative;
      .el-tree-node__expand-icon {
        position: absolute;
        right: 0;
        bottom: 14px;
        transform: rotate(-90deg);
        font-size: 18px;
      }
      .el-tree-node__label {
        font-size: 16px;
        margin-left: 10px;
      }
      .el-tree-node__expand-icon.expanded {
        transform: rotate(0deg);
      }

      .el-icon-caret-right:before {
        content: "\e6df";
      }
    }

    ::v-deep.el-menu {
      border: none;
    }
  }
}

.actionBox {
  display: flex;
  align-items: center;
  justify-content: center;
  .action {
    color: #4b93d5;
    cursor: pointer;
  }

  .shu {
    font-weight: 300;
    font-size: 18px;
    color: #4b93d5;
    margin: 0 5px;
  }
}

.dialog {
  ::v-deep .el-dialog {
    max-width: 750px;
    min-width: 500px;
    border-radius: 10px;
    background-color: #f9f9f9;
  }

  ::v-deep .el-dialog__header {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background-color: #4895db;
    padding: 0;
    border-radius: 10px 10px 0 0;

    span {
      font-size: 16px;
      color: #fff;
    }
  }

  ::v-deep .el-dialog__headerbtn {
    top: 15px;
  }

  ::v-deep .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
    font-size: 18px;
  }

  ::v-deep .el-dialog__body {
    display: flex;
    padding-left: 130px;
  }

  ::v-deep .el-input__inner {
    height: 30px;
    line-height: 30px;
  }

  ::v-deep .el-form-item__content {
    width: 300px;
  }

  ::v-deep .el-form-item {
    margin-bottom: 10px;
  }

  ::v-deep .el-dialog__footer {
    padding: 10px 20px 50px;
    text-align: center;
  }

  ::v-deep .el-button--default {
    width: 130px;
    border-radius: 20px;
    background-color: #f0f0f0;
    color: #aaaaaa;
    border: none;
  }

  ::v-deep .el-button + .el-button {
    width: 130px;
    border-radius: 20px;
    margin-left: 50px;
    background-color: #4895db;
    border-color: #4895db;
  }

  ::v-deep .el-select,
  ::v-deep .el-date-editor {
    width: 100%;
  }
}
</style>